<template>
  <view>
    <view class="student_box">
      <view
        class="student_item"
        v-for="item in studentList"
        :key="item.user_id"
        @click="onUser(item.user_id)"
      >
        <div class="avatar">
          <u-avatar :src="item.avatar_url" size="100"></u-avatar>
        </div>
        <view class="name u-line-1">{{ item.nick_name }}</view>
      </view>
    </view>
    <edu-empty v-if="$u.test.empty(studentList)"></edu-empty>
  </view>
</template>

<script>
export default {
  props: {
    detailsInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      studentList: [],
    }
  },
  methods: {
    getStudentsList(page, mescroll) {
      this.$edu.api.getCourseClassesStudents(this.detailsInfo.id).then((res) => {
        const { data } = res
        this.studentList = data
        mescroll.endSuccess(data.length)
      })
    },
    // 个人主页
    onUser(id) {
      this.$edu.judgeLogin(() => {
        this.$edu.route('/pageFound/user/index', {
          id: id,
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.student_box {
  display: flex;
  flex-wrap: wrap;
  .student_item {
    height: 150rpx;
    width: 150rpx;
    margin-left: 30rpx;
    margin-top: 40rpx;
    overflow: hidden;
    .avatar {
      width: 100rpx;
      margin: 0 auto;
    }
    .name {
      height: 32rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-content-color;
      text-align: center;
    }
  }
}
</style>
